<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>新增收货地址页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script th:src="@{/js/jquery.js}"></script>

</head>
<body>


<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <h2><a class="btn btn-sm btn-success" th:href="@{/doorto/address/insertAddress}">收货地址新增</a></h2>
    <div class="table-responsive">
        <!--需要区分是收货地址修改还是添加；-->
        <form th:action="@{/doorto/address/insertAddress}" method="post">
            <!--发送put请求修改员工数据-->
            <!--
        1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
        2、页面创建一个post表单
        3、创建一个input项，name="_method";值就是我们指定的请求方式
        -->
            <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
            <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

            <div class="form-group">
                <label>所在地区</label><br>
                <td><span>请选择所在省：</span>
                    <select id="province" name="province" onchange="getCities()">
                        <option value="province">请选择</option>
                    </select>
                </td>

                <td><span>请选择所在市：</span>
                    <select id="city" name="city" onchange="getAreas()">
                        <option value="city.value">请选择</option>
                    </select>
                </td>
                <td> <span>请选择所在县区：</span>
                    <select id="area" name="countyTown">
                        <option value="">请选择</option>
                    </select>
                </td>
            </div>

            <div class="form-group">
                <label>收货人姓名</label>
                <input name="username" type="username" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.email}">
            </div>
            <div class="form-group">
                <label>收货人手机号</label>
                <input name="phone" type="phone" class="form-control" placeholder="19808897866" th:value="${emp!=null}?${emp.email}">
            </div>
            <div class="form-group">
                <label>详细收货地址</label>
                <input name="addressDetails" type="addressDetails" class="form-control" placeholder="黄河大街30号辽宁机电大学黄楼618" th:value="${emp!=null}?${emp.email}">
            </div>

            <li class="ent">
                <button class="btn2" type="submit"><a class="a">保存地址</a></button>
            </li>
        </form>
    </div>
</main>


<script type="text/javascript">

    // 获取省份数据的函数
    function getProvinces() {
        fetch("http://localhost:18080/dgtxPlaces/linkage")
            .then(response => response.json())
            .then(data => {
                const provinceSelect = document.getElementById('province');
                data.forEach(province => {
                    const option = document.createElement('option');
                    option.value = province.id;
                    option.text = province.cname;
                    provinceSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取省份数据时出错：', error);
            });
    }

    // 根据选择的省份获取城市数据
    function getCities() {
        const selectedProvinceId = document.getElementById('province').value;
        const url = 'http://localhost:18080/dgtxPlaces/getSecondaryList?parentId='+selectedProvinceId;
        // fetch('http://localhost:18080/dgtxPlaces/getSecondaryList?parentId=${selectedProvinceId}')
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const citySelect = document.getElementById('city');
                citySelect.innerHTML = '<option value="">请选择城市</option>';
                data.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.id;
                    option.text = city.cname;
                    citySelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取城市数据时出错：', error);
            });
    }

    // 根据选择的城市获取区域数据
    function getAreas() {
        const selectedCityId = document.getElementById('city').value;
        const uri2 = 'http://localhost:18080/dgtxPlaces/getSecondaryList?parentId='+selectedCityId;
        fetch(uri2)
            // fetch(`后端获取区域的接口 URL?cityId=${selectedCityId}`)
            .then(response => response.json())
            .then(data => {
                const areaSelect = document.getElementById('area');
                areaSelect.innerHTML = '<option value="">请选择区域</option>';
                data.forEach(area => {
                    const option = document.createElement('option');
                    option.value = area.id;
                    option.text = area.cname;
                    areaSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取区域数据时出错：', error);
            });
    }

    // 页面加载时获取省份数据
    window.onload = getProvinces;
</script>

</body>
</html>